import React, { Component } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import {  Flex,  Icon,WingBlank,Button,List ,Modal} from 'antd-mobile';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import NoLazyImg from "../../components/NoLazyImg/NoLazyImg";
import MyScroll from '../../components/MyScroll/MyScroll';
import dingweisvg from "../../assets/img/dingwei.svg";
import kefusvg from "../../assets/img/kefu.svg";
import waitsvg from "../../assets/img/wait.svg";
import fahuosvg from "../../assets/img/fahuo.svg";
import selectsvg from "../../assets/img/select.svg";
import returnState from '../../assets/img/returnState.svg'
import {detail, pButton} from "./orderDetail.less";
import {Toast} from "antd-mobile/lib/index";

const Item = List.Item;


class OrderDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            orderDetail:[],
            orderGoodsEntityList:[],
            sexVisible: 0,
            showHour:"",
            m:"",
            s:"",
            now: this.props.orderList.orderDetail.nowTime!=undefined?this.props.orderList.orderDetail.nowTime:new Date().getTime()
        };

        this.timerNum = '';
    }
    showModal = (e) => {
        e.preventDefault();
        this.setState({
            sexVisible: 1,
        });
    }
    onClose = () => {
        this.setState({
            sexVisible: 0,
        });
    }
    timer1=()=>{
        const {orderDetail={},orderGoodsEntityList=[]} = this.props.orderList;
        // console.log(orderDetail)
        let now = this.state.now;
        // console.log(now)
        let createTime = orderDetail.createTime;
        let seconds =  parseInt((now -  createTime) / 1000);
        seconds = 86400000  - seconds;
        let h = Math.floor(seconds / 60 / 60);
        // 天数
        let d = parseInt(h / 24);
        // 显示的小时数
        let showHour = Math.floor(h - d * 24);
        let m = Math.floor((seconds - h * 60 * 60) / 60);
        let s = Math.floor((seconds - h * 60 * 60 - m * 60));
        if (seconds < 0) {
            h = 0;
            m = 0;
            s = 0;
            d = 0;
            showHour = 0;
        }
        this.setState({
            d:d,
            showHour:showHour,
            m:m,
            s:s,
            now:now+1000
        });
        if((now - createTime) < 1000){
            clearInterval(this.timer());
            // this.props.dispatch({type:'orderList/CancleOrderEFF',obj: orderDetail.orderSn})
        }
    }
    timer=()=> {
        let interval = setInterval(this.timer1, 1000,1000);
        this.timer = interval;
        return interval;
    }
    checkTime=(i)=>{
        if(i < 10 ){
            i = "0" + i;
        }
        return i;
    }

    conponentWillUnmount() {
        clearInterval(this.timerNum);
    }

    componentDidMount(){
        this.props.dispatch({type: "orderList/OrderDetailEFF", obj: this.props.match.params.data});
        // this.timer();
        this.timer();
    }

    handleRefund = () => {
        const {orderDetail={},orderGoodsEntityList=[]} = this.props.orderList;
        console.log(orderDetail.orderState)
        if (orderDetail.orderState === 30) {
            this.props.dispatch(routerRedux.push({
                pathname:`/orderCancel/${orderDetail.orderId}`
            }))
            return
        }
        // 待发货
        // else if (orderDetail.orderState === 20) {
        //     console.log(orderDetail)
        //     let obj = {
        //         id: orderDetail.orderId,
        //         refundAmount: orderDetail.orderAmount,
        //     }
        //     this.props.dispatch({type:"orderList/refundEFF",obj: obj})
        //     .then((result)=>{
        //         if(result.code==200){
        //             Toast.info(result.msg,1,()=>{
        //                 this.props.dispatch(routerRedux.replace({
        //                     pathname:`/returnSuccess/${[result.ret.id, result.ret.time, result.ret.type]}`
        //                     // pathname:`/afterSale`
        //                 }))
        //             });
        //         }else{
        //             Toast.fail(result.msg);
        //         }
        //     })
        // }
        else {
            this.props.dispatch(routerRedux.push({
                pathname:`/EvaluateAndAfter/${orderDetail.orderId}/${1}`
            }))
        }
    }

    render() {
        const {orderDetail={},orderGoodsEntityList=[]} = this.props.orderList;
        const {m,s,showHour} = this.state;
        const {storeLogo="",orderGroupInfoVo={}} = orderDetail;
        const {storeId}=this.props.orderList.orderDetail;
        // const {goodsImage=""} =orderGoodsEntityList;
        // console.log(orderGoodsEntityList, '数据。。。');


        const isAfterSale = orderDetail.barterState == 80 || orderDetail.barterState == 90 || +orderDetail.refundState || +orderDetail.returnState;

        return (
            <Flex style={{
                height:"100%"
            }} direction="column" className={detail}>
                <NavTopBar title="订单详情" dispatch={this.props.dispatch}/>
                <MyScroll>
                    <div style={{width:"100%",paddingBottom:"1rem"}}>
                        <Flex style={{backgroundColor:"#0aa6e8",color:"#fff",padding:".4rem 0"}}>
                            <WingBlank>
                                {
                                    orderDetail.orderState==10? <div>
                                        <Flex>
                                            <Icon type={waitsvg.id} style={{height:".4rem",width:".4rem", color: '#fff'}}/><div className="wait">等待付款...</div>
                                        </Flex>
                                            {/* <div style={{marginTop:".3rem"}}>{"请在" + showHour + "小时" + m + "分钟" + s + "秒内付款，订单将于24小时后自动取消"}</div> */}
                                            <div style={{marginTop:".3rem"}}>{`订单将于${showHour}小时${m}分钟${s}秒后自动取消,请尽快付款`}</div>
                                        </div>:
                                    orderDetail.orderState==40?
                                        <Flex><Icon type={selectsvg.id} style={{height:".4rem",width:".4rem"}}/><div className="wait">已完成</div></Flex>:
                                    isAfterSale ?
                                        <Flex><Icon type={returnState.id} style={{height:".4rem",width:".4rem"}}/><div className="wait">售后中...</div></Flex>:
                                    orderDetail.orderState==20?
                                        <Flex><Icon type={fahuosvg.id} style={{height:".4rem",width:".4rem"}}/><div className="wait">等待发货...</div></Flex>:
                                    orderDetail.orderState==30?
                                        <Flex><Icon type={fahuosvg.id} style={{height:".4rem",width:".4rem"}}/><div className="wait">等待收货...</div></Flex>:
                                    orderDetail.orderState==50?
                                        <Flex><Icon type={selectsvg.id} style={{height:".4rem",width:".4rem"}}/><div className="wait">已提交</div></Flex>:
                                    orderDetail.orderState==60?
                                        <Flex><Icon type={selectsvg.id} style={{height:".4rem",width:".4rem"}}/><div className="wait">已确认</div></Flex>:
                                                <p className="wait">已取消</p>
                                }
                            </WingBlank>
                        </Flex>

                        {
                            +orderDetail.isShowAfterSale
                                ? <List style={{marginTop:".3rem"}} onClick={() => this.props.dispatch(routerRedux.push(`/afterSale?type=1`))}>
                                      <Item arrow="horizontal">售后进度：您有售后订单，请点击查看 </Item>
                                  </List>
                                : ""
                        }

                        {
                            orderDetail.orderState == 40
                                ? <List style={{marginTop: ".3rem"}}>
                                        <Item arrow="horizontal">感谢您的购物,欢迎再次光临!</Item>
                                  </List>
                                : ""
                        }
                        <div style={{margin:"0 0 .3rem",backgroundColor:"#fff"}}>
                            <WingBlank >
                                <Flex style={{width:"100%"}}>
                                    <Icon type={dingweisvg.id} style={{marginRight:".3rem",height:".5rem",width:".5rem"}}/>
                                    <div style={{width:"100%",paddingTop:".2rem",paddingBottom:".2rem"}}>
                                        <Flex justify="between" style={{color:"#333",marginBottom:".3rem",fontSize:".32rem"}}>
                                            <div>收货人 : {orderDetail.trueName}</div>
                                            <div style={{color:"#999"}}>{orderDetail.mobPhone}</div>
                                        </Flex>
                                        <div>收货地址 : {orderDetail.address}</div>
                                    </div>
                                </Flex>
                            </WingBlank>
                        </div>
                        {orderDetail.activityType==110?<div style={{margin:"0 0 .3rem",backgroundColor:"#fff"}}>
                            <WingBlank>
                                <Flex justify="between" style={{padding:".19rem 0",borderBottom:"1px solid #f6f6f6"}}>
                                    <Flex>
                                        <div style={{background:"#ff0036",width:".05rem",height:".35rem",marginRight:".1rem"}}></div>
                                        <div style={{fontSize:".28rem"}}>拼团须知</div>
                                    </Flex>
                                    <div >
                                        好友参团·人满发货·人不满退款
                                    </div>
                                </Flex>
                                <Flex justify="around" style={{width:"100%",margin:".5rem 0"}}>
                                    {orderGroupInfoVo.memberList&&orderGroupInfoVo.memberList.map((v,i)=>{
                                        return <div key={i} style={{textAlign:"center"}}>
                                            <div style={{margin:".2rem auto",width:".9rem",height:".9rem",borderRadius:"100%"}}>
                                                <NoLazyImg src={v.memberAvatar } style={{width:".9rem",height:".9rem",borderRadius:"100%"}}></NoLazyImg>
                                                {v.memberType==1?<div className="tuanzhang">团长</div>:""}
                                            </div>
                                            <div style={{color:"#999"}}>{v.memberName }</div>
                                        </div>
                                    })}
                                    {[...Array(orderGroupInfoVo.surplusNum )].map((a,b)=>{
                                        return <div key={b} style={{textAlign:"center"}}>
                                            <Flex justify="center" style={{width:".9rem",height:".9rem",borderRadius:"100%",fontSize:".46rem",background:"#DDDDDD",color:"#666"}}>?</Flex>
                                            <div style={{opacity:"0"}}>111</div>
                                        </div>
                                    })}
                                </Flex>
                                <Flex style={{fontSize:".3rem",width:"100%",paddingBottom:".38rem"}} justify="center">
                                    还差 <span style={{color:"#ff0036",margin:"0 .2rem"}}>{orderGroupInfoVo.surplusNum}</span>  个小伙伴,大家一起拼团买吧! <span style={{color:"#ff0036"}}>邀请好友!</span>
                                </Flex>
                            </WingBlank>
                        </div>:""}

                        <div style={{marginBottom:".3rem",backgroundColor:"#fff"}}>
                            <WingBlank>
                                <Flex onClick={()=>{
                                    if(storeId!=0){
                                        this.props.dispatch(routerRedux.push({
                                            pathname: `/storesShow/${storeId}`,
                                        }));
                                    }
                                    }} justify="between" style={{borderBottom:"1px solid #999", padding: '.24rem 0'}}>
                                    <Flex style={{color:"#333",fontSize:".32rem"}}>

                                        <NoLazyImg src={storeLogo} style={{width:".7rem",height:".7rem",borderRadius:"100%",marginRight:".2rem"}} alt=""/>
                                        {orderDetail.storeName}
                                    </Flex>
                                    {/* 暂时注销。。。联系客服。。。 */}
                                    {/* <Flex className="lianxikefu" justify="end" style={{width:"100%"}}><span >联系客服</span><Icon type={kefusvg.id} style={{marginLeft:".1rem"}}/></Flex> */}
                                </Flex>
                                {orderGoodsEntityList.map((v,idx)=>{
                                    // console.log(v, '商品信息。。。看个数');
                                    return (
                                        <div key={idx} style={{width: '100%'}}>
                                            <Flex onClick={()=>{this.props.dispatch(routerRedux.push({pathname: `/goodsDetail/${v.specId}`}))}} style={{padding:".3rem 0"}} key={idx}>
                                                <div style={{width:"2rem",height:"2rem",marginRight:".2rem"}}>
                                                    <NoLazyImg src={v.goodsImage} style={{width:"2rem",height:"2rem"}}/>
                                                </div>

                                                {/*<img src={"http://testbbc.leimingtech.com"+orderGoodsEntityList.goodsImage} style={{width:"2rem",height:"2rem",marginRight:".2rem"}} alt=""/>*/}
                                                <div style={{width:"100%"}}>
                                                    <div className="goodsName" style={{lineHeight:".4rem",marginBottom:"1rem"}}>{v.goodsName}</div>
                                                    <Flex justify="between">
                                                        <div style={{color:"#ff0036"}}>¥<span style={{fontSize:".3rem"}}>{v.goodsPayPrice}</span></div>
                                                        <div>x{v.goodsNum}</div>
                                                    </Flex>
                                                </div>
                                            </Flex>

                                            {
                                                v.afterSaleId
                                                ? <Flex justify="end" style={{width: '100%', paddingTop: '.1rem', paddingBottom: '.2rem'}}>
                                                    {/* 暂时没有取消申请的接口。暂时注释 */}
                                                    {/* <p className={ pButton }>取消申请</p> */}
                                                    <p onClick={() => this.props.dispatch(routerRedux.push(`/returnDetail/${v.afterSaleId},${v.type==0?3:v.type==1?2:1}`))} className={ pButton }>查看进度</p>
                                                  </Flex>
                                                : <Flex justify="end" style={{width: '100%', paddingTop: '.1rem', paddingBottom: '.2rem'}}>
                                                    <p onClick={() => {
                                                            this.props.dispatch({type:'orderList/cartEFF', obj: {goodsId: v.goodsId, count:  v.goodsNum, specId: v.specId, saveType: 1}}).then((r)=>{
                                                                this.props.dispatch(routerRedux.push("/order"));
                                                            });
                                                        }} className={ pButton }>再次购买</p>
                                                  </Flex>
                                            }
                                            {/* <Flex justify="end" style={{width: '100%'}}>
                                                <p className={ pButton }>取消申请</p>
                                                <p className={ pButton }>查看进度</p>
                                            </Flex>
                                            <Flex justify="end" style={{width: '100%'}}>
                                                <p className={ pButton }>再次购买</p>
                                            </Flex> */}
                                        </div>
                                    )
                                })}

                            </WingBlank>
                        </div>
                        <List>
                            <Item>订单编号 : { orderDetail.orderSn}</Item>
                            <Item>下单时间 : { orderDetail.createTimeStr}</Item>
                        </List>
                        <List>
                            <Item>支付方式 : { orderDetail.paymentName}</Item>
                            {
                                orderDetail.orderState == 30 ? <Item arrow="horizontal" onClick={() => this.props.dispatch(routerRedux.push(`/orderTrack/${dataItem.shippingCode}`))}>物流消息 : </Item> : ""
                            }
                            <Item>配送方式 : { orderDetail.shippingName }</Item>
                        </List>
                        <List>
                            {/* <Item>发票信息 : { orderDetail.invState ? orderDetail.invState == 1 ? "普通发票" : "增值税专用发票" : "无发票" }</Item> */}
                            <Item>发票信息 : { orderDetail.invState || '无发票信息' }</Item>
                            {
                                orderDetail.invState ? <Item>发票抬头 : { orderDetail.invCompany || orderDetail.titleName || orderDetail.invoice }</Item> : ""
                            }

                            {
                                orderDetail.invState ? <Item>发票内容 : { orderDetail.invContent }</Item> : ""
                            }
                        </List>
                        <List style={{marginTop:".3rem"}}>
                            <Item extra={"¥"+orderDetail.orderTotalPrice==undefined?"":orderDetail.orderTotalPrice}>商品总额 : </Item>
                            <Item extra={"-¥"+orderDetail.promoPrice==undefined?"":orderDetail.promoPrice}>满减 : </Item>
                            <Item extra={"-¥"+orderDetail.couponPrice==undefined?"":orderDetail.couponPrice}>优惠券 :</Item>
                            <Item extra={"¥"+orderDetail.shippingFee==undefined?"":orderDetail.shippingFee}>运费 : </Item>
                        </List>
                        <List>
                            <Item  extra={<span style={{color:"#ff0036",fontSize:"40px"}}>{"¥"+orderDetail.orderAmount==undefined?"":orderDetail.orderAmount}</span>}><span style={{fontSize:".32rem", color: '#333 '}}>合计 : </span></Item>
                        </List>
                    </div>
                </MyScroll>

                {
                    orderDetail.orderState==10?<Flex justify="between" style={{width:"100%",position:"fixed",bottom:"0"}}>
                                                    <Button inline style={{width:"100%"}} onClick={this.showModal}>取消订单</Button>
                                                <Button inline style={{width:"100%",color:"#fff",backgroundColor:"#ff0036"}} onClick={()=>{this.props.dispatch(routerRedux.push({pathname:`/payMent/${[orderDetail.orderAmount,orderDetail.orderSn,orderDetail.paySn]}`}))}}>立即支付</Button>
                                                </Flex>:
                            orderDetail.orderState == 20 ? <Flex justify="between" style={{width:"100%",position:"fixed",bottom:"0"}}>
                                                    {
                                                        isAfterSale ?
                                                        <Button onClick={() => {
                                                                this.props.dispatch({type:'orderList/againEFF', obj: {id: orderDetail.orderId}}).then((r)=>{
                                                                    this.props.dispatch(routerRedux.push("/order"));
                                                                });
                                                            }} style={{width:"100%",color:"#fff",backgroundColor:"#ff0036"}}>再次购买</Button>
                                                        : <Button inline style={{width:"100%"}} onClick={this.showModal}>取消订单</Button>
                                                    }

                                                    </Flex>:
                            orderDetail.orderState == 30 ? isAfterSale ?
                                                            <Flex justify="between" style={{width:"100%",position:"fixed",bottom:"0"}}>
                                                                <Button onClick={() => {
                                                                        this.props.dispatch({type:'orderList/againEFF', obj: {id: orderDetail.orderId}}).then((r)=>{
                                                                            this.props.dispatch(routerRedux.push("/order"));
                                                                        });
                                                                    }} style={{width:"100%",color:"#fff",backgroundColor:"#ff0036"}}>再次购买</Button>
                                                            </Flex>
                                                            :<Flex justify="between" style={{width:"100%",position:"fixed",bottom:"0"}}>
                                                                <Button inline style={{width:"100%"}} onClick={this.handleRefund}>申请退款</Button>
                                                                <Button inline style={{width:"100%",color:"#fff",backgroundColor:"#ff0036"}} onClick={()=>{
                                                                    this.setState({sexVisible: 2});
                                                                }}>确认收货</Button>
                                                            </Flex>:
                            orderDetail.orderState==40?<Flex justify="between" style={{width:"100%",position:"fixed",bottom:"0"}}>
                                                    {/* <Button  style={{width:"100%"}} onClick={()=>{
                                                        this.props.dispatch({type:'orderList/DelOrderEFF',obj:orderDetail.orderId}).then((r)=>{
                                                            if(r.code==200){
                                                                Toast.success(r.msg, 1.5, ()=>{
                                                                    this.props.dispatch(routerRedux.goBack());
                                                                });
                                                            } else {
                                                                Toast.fail(r.msg, 1.5);
                                                            }
                                                        })
                                                    }}>删除订单</Button> */}
                                                    {
                                                        !isAfterSale &&
                                                        <Button style={{width:"100%"}} onClick={()=>{
                                                            this.props.dispatch(routerRedux.push({
                                                                pathname:`/EvaluateAndAfter/${orderDetail.orderId}/${1}`
                                                            }))
                                                        }}>返修/退换</Button>
                                                    }

                                                    <Button  style={{width:"100%"}} onClick={()=>{
                                                        this.props.dispatch(routerRedux.push({
                                                            pathname:`/EvaluateAndAfter/${orderDetail.orderId}/${0}`
                                                        }))
                                                    }}>评价晒单</Button>
                                                <Button onClick={() => {
                                                        this.props.dispatch({type:'orderList/againEFF', obj: {id: orderDetail.orderId}}).then((r)=>{
                                                            this.props.dispatch(routerRedux.push("/order"));
                                                        });
                                                    }} style={{width:"100%",color:"#fff",backgroundColor:"#ff0036"}}>再次购买</Button>
                                                </Flex>:
                                orderDetail.orderState==0? <Flex style={{width: '100%'}}>
                                    <Button onClick={() => {
                                            this.props.dispatch({type:'orderList/againEFF', obj: {id: orderDetail.orderId}}).then((r)=>{
                                                this.props.dispatch(routerRedux.push("/order"));
                                            });
                                        }} style={{width:"100%",color:"#fff",backgroundColor:"#ff0036"}}>再次购买</Button>
                                                            </Flex>:""
                }
                <Modal
                    title="取消订单"
                    transparent
                    maskClosable={false}
                    visible={this.state.sexVisible == 1}
                    onClose={this.onClose}
                    footer={[
                        { text: '取消', onPress: () => { this.onClose() } },
                        { text: '确定', onPress: () => {
                            // console.log(orderDetail.orderSn, "orderDetail.orderSn");
                            this.props.dispatch({type:'orderList/CancleOrderEFF', obj: {orderSn: orderDetail.orderSn}}).then((r)=>{
                                if(r.code==200){
                                    Toast.success(r.msg, 1.5, ()=>{
                                        this.props.dispatch(routerRedux.replace({
                                            pathname: `/orderList/${0}`,
                                        }))
                                    });
                                } else {
                                    Toast.fail(r.msg, 1.5);
                                    this.onClose();
                                }
                            })
                        } }
                    ]}
                >
                    确定取消此次订单吗
                </Modal>
                <Modal
                    title="确定收货"
                    transparent
                    maskClosable={false}
                    visible={this.state.sexVisible == 2}
                    onClose={this.onClose}
                    footer={[
                         { text: '取消', onPress: this.onClose },
                         { text: '确定', onPress: () => {
                             console.warn(orderDetail.orderSn, orderDetail, 'orderDetail');
                             this.props.dispatch({type:'orderList/FinishOrderEFF', obj: orderDetail.orderSn}).then((r)=>{
                                 if(r.code==200){
                                     Toast.success(r.msg, 1.5, ()=>{
                                         this.props.dispatch(routerRedux.replace({
                                             pathname: `/orderList/${0}`,
                                         }))
                                     });
                                 } else {
                                     Toast.fail(r.msg, 1.5);
                                     this.onClose();
                                 }
                             })
                             } }
                    ]}
                >
                    您确认此次收货吗
                </Modal>
            </Flex>
        );
    }
}


export default connect(({ orderList }) => ({ orderList }))(OrderDetail);
